<template>
<a-modal v-model:visible="visible"
    :title="`编辑用户ID: ${user.id}[${user.name}]的权限`"
    centered
    @ok="updateUser"
    @cancel="emit('close')"
    okText="确认操作"
    cancelText="取消">
  <a-form>
    <a-form-item label="设置权限">
      <a-select v-model:value="permission">
        <a-select-option value="0" title="系统管理员">系统管理员</a-select-option>
        <a-select-option value="1" title="普通用户">普通用户</a-select-option>
        <a-select-option value="2" title="普通用户">创作者</a-select-option>
      </a-select>
    </a-form-item>
  </a-form>
</a-modal>
</template>

<script setup>
import {ref, watch} from "vue";
import {apiPut} from "../../../fentch";
import {message} from "ant-design-vue";

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false
  },
  user: {
    type: Object,
    required: true,
    default: {
      id: 0,
      name: '',
      level: 0
    }
  }
})

const permission = ref('0')

// 动态改变permission
watch(() => props.user, (value, oldValue) => {
  permission.value = value.level.toString()
})

const emit = defineEmits(['ok', 'close'])

const updateUser = () => {
  apiPut(`/users/level/${props.user.id}`, {level: permission.value}).then(res => {
    if (res.data.code === 0) {
      emit('ok')
      return
    }
    message.error(res.data.message)
  })
}
</script>

<style scoped>

</style>